<template>
  <div class="cus">
    <div style="width:500px;" class="cus_box">
      <div class="title">
        <span>退款</span
        ><i @click="$emit('refund_call')" class="el-icon-close"></i>
      </div>
      <div class="content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="退款Money" prop="refundMoney">
            <el-input
              placeholder="Please Enter"
              style="width:120px;"
              v-model="ruleForm.refundMoney"
            ></el-input>
          </el-form-item>
          <el-form-item label="退款原因" prop="notes">
            <el-input
              placeholder="Please Enter"
              style="width:300px;"
              v-model="ruleForm.notes"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="$emit('refund_call')">Cancel</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >Confirm</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "refund",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("Please Enter"));
      }
      if (isNaN(value)) {
        callback(new Error("Please Input数字值"));
      } else if (value.indexOf(".") != -1) {
        if (value.split(".")[1].length > 2) {
          callback(new Error("最多两位小数"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        refundMoney: "",
        notes: ""
      },
      rules: {
        refundMoney: [
          { required: true, message: "Please Enter", trigger: "blur" },
          { validator: checkAge, trigger: "blur" }
        ],
        notes: [{ required: true, message: "Please Enter", trigger: "blur" }]
      }
    };
  },
  props: ["res"],
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert('submit!');
          this.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async submit() {
      await this.api.orderRefund({
        id: this.res.id,
        refundMoney: this.ruleForm.refundMoney,
        notes: this.ruleForm.notes,
        state: 1
      });
      this.$emit("refund_call", true);
    }
  }
};
</script>

<style scoped lang="scss"></style>
